<template>
	<view class="home-container">
		<!-- 顶部搜索栏 -->
		<view class="search-bar">
			<view class="search-input">
				<view class="search-icon">🔍</view>
				<text class="placeholder">搜索搭子、活动、兴趣</text>
			</view>
			<view class="message-icon" @click="goToMessage">💬</view>
		</view>

		<!-- 轮播图 -->
		<view class="banner-wrapper">
			<swiper :current="current" @change="change" class="swiper" indicator-dots indicator-active-color="#7C3AED"
				indicator-color="rgba(0,0,0,0.3)">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image :src="item.image" mode="aspectFill" class="banner-image"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 功能入口 -->
		<view class="function-section">
			<view class="function-item" v-for="(item, index) in functionList" :key="index"
				@click="goToFunction(item.path)">
				<view class="function-icon" :style="{ backgroundColor: item.color }">
					<text class="icon-text">{{ item.icon }}</text>
				</view>
				<text class="function-name">{{ item.name }}</text>
			</view>
		</view>

		<!-- 推荐活动 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">推荐活动</text>
				<text class="section-more" @click="goToMore('activities')">查看更多 ></text>
			</view>
			<view class="activity-list">
				<view class="activity-item" v-for="(activity, index) in activityList" :key="index"
					@click="goToActivityDetail(activity.id)">
					<image :src="activity.image" mode="aspectFill" class="activity-image"></image>
					<view class="activity-info">
						<text class="activity-title">{{ activity.title }}</text>
						<view class="activity-meta">
							<text class="activity-time">{{ activity.time }}</text>
							<text class="activity-location">{{ activity.location }}</text>
						</view>
						<view class="activity-status">
							<text class="activity-price">{{ activity.price }}</text>
							<text class="activity-people">{{ activity.people }}人参加</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 热门搭子 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">热门搭子</text>
				<text class="section-more" @click="goToMore('partners')">查看更多 ></text>
			</view>
			<view class="partner-list">
				<view class="partner-item" v-for="(partner, index) in partnerList" :key="index"
					@click="goToPartnerDetail(partner.id)">
					<image :src="partner.avatar" mode="aspectFill" class="partner-avatar"></image>
					<text class="partner-name">{{ partner.name }}</text>
					<text class="partner-interest">{{ partner.interest }}</text>
				</view>
			</view>
		</view>

		<!-- 推荐兴趣 -->
		<view class="section mb-xl">
			<view class="section-header">
				<text class="section-title">推荐兴趣</text>
				<text class="section-more" @click="goToMore('interests')">查看更多 ></text>
			</view>
			<view class="interest-list">
				<view class="interest-item" v-for="(interest, index) in interestList" :key="index"
					@click="goToInterestDetail(interest.id)">
					<image :src="interest.image" mode="aspectFill" class="interest-image"></image>
					<text class="interest-name">{{ interest.name }}</text>
					<text class="interest-count">{{ interest.count }}人关注</text>
				</view>
			</view>
		</view>

	</view>

	<!-- 底部tabbar -->
	<view class="tabbar">
		<BottomTabbar theme="light" :value="0" :color="'#892FE8'" />
	</view>
	
</template>

<script setup>
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		ref,
		onMounted
	} from 'vue'

	// 轮播图数据
	const bannerList = ref([{
			image: '/static/common/banner/banner01.png',
			link: ''
		},
		{
			image: '/static/common/banner/banner02.png',
			link: ''
		}
	])

	// 当前轮播图索引
	const current = ref(0)

	// 功能入口数据
	const functionList = ref([{
			name: '附近活动',
			icon: '📍',
			color: '#7C3AED',
			path: '/pages_event/index'
		},
		{
			name: '兴趣群组',
			icon: '👥',
			color: '#EC4899',
			path: '/pages_interest/index'
		},
		{
			name: '找人聊天',
			icon: '💬',
			color: '#10B981',
			path: '/pages_news/index'
		},
		{
			name: '我的主页',
			icon: '👤',
			color: '#3B82F6',
			path: '/pages_my/index'
		}
	])

	// 活动列表数据
	const activityList = ref([{
			id: '1',
			image: '/static/common/event/01.png',
			title: '周末户外徒步登山活动',
			time: '周日 09:00',
			location: '香山公园',
			price: '¥38',
			people: 23
		},
		{
			id: '2',
			image: '/static/common/event/02.png',
			title: '城市摄影爱好者聚会',
			time: '周六 14:00',
			location: '798艺术区',
			price: '¥0',
			people: 45
		}
	])

	// 搭子列表数据
	const partnerList = ref([{
			id: '1',
			avatar: '/static/avatar/1.jpg',
			name: '小明',
			interest: '摄影 / 美食'
		},
		{
			id: '2',
			avatar: '/static/avatar/2.jpg',
			name: '小红',
			interest: '健身 / 瑜伽'
		},
		{
			id: '3',
			avatar: '/static/avatar/3.jpg',
			name: '小李',
			interest: '阅读 / 电影'
		},
		{
			id: '4',
			avatar: '/static/avatar/4.jpg',
			name: '小王',
			interest: '音乐 / 旅行'
		}
	])

	// 兴趣列表数据
	const interestList = ref([{
			id: '1',
			image: '/static/common/user/01.png',
			name: '摄影',
			count: 2341
		},
		{
			id: '2',
			image: '/static/common/user/02.png',
			name: '健身',
			count: 5678
		},
		{
			id: '3',
			image: '/static/common/user/03.png',
			name: '美食',
			count: 8901
		},
		{
			id: '4',
			image: '/static/common/user/04.png',
			name: '旅行',
			count: 6789
		}
	])

	// 轮播图切换
	const change = (e) => {
		current.value = e.detail.current
	}

	// 点击轮播图指示点
	const clickDot = (index) => {
		current.value = index
	}

	// 跳转到消息页面
	const goToMessage = () => {
		uni.switchTab({
			url: '/pages/message/message'
		})
	}

	// 跳转到功能页面
	const goToFunction = (path) => {
		if (path.includes('/pages/')) {
			uni.switchTab({
				url: path
			})
		} else {
			uni.navigateTo({
				url: path
			})
		}
	}

	// 跳转到活动详情
	const goToActivityDetail = (id) => {
		uni.navigateTo({
			url: `/pages/activities/detail?id=${id}`
		})
	}

	// 跳转到搭子详情
	const goToPartnerDetail = (id) => {
		uni.navigateTo({
			url: `/pages/profile/other?id=${id}`
		})
	}

	// 跳转到兴趣详情
	const goToInterestDetail = (id) => {
		uni.navigateTo({
			url: `/pages/interest/detail?id=${id}`
		})
	}

	// 跳转到更多页面
	const goToMore = (type) => {
		let url = ''
		switch (type) {
			case 'activities':
				url = '/pages/activities/activities'
				break
			case 'partners':
				url = '/pages/index/partners'
				break
			case 'interests':
				url = '/pages/interest/interest'
				break
		}
		uni.navigateTo({
			url
		})
	}

	// 页面加载时获取数据
	onMounted(() => {
		// 这里可以调用API获取真实数据
		console.log('Home page mounted')
	})


	onPullDownRefresh(() => {
		console.log("下拉刷新")
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	onReachBottom(() => {
		console.log("上拉加载更多")
	})
</script>

<style lang="scss">
	.home-container {
		background-color: #f3f4f6;
		min-height: 100vh;
		padding-bottom: 120rpx;

		// 搜索栏样式
		.search-bar {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			background-color: #ffffff;
			z-index: 999;
			border-bottom: 1rpx solid #e5e7eb;

			.search-input {
				display: flex;
				align-items: center;
				flex: 1;
				background-color: #f3f4f6;
				padding: 16rpx 24rpx;
				border-radius: 80rpx;
				margin-right: 20rpx;

				.search-icon {
					font-size: 28rpx;
					margin-right: 12rpx;
				}

				.placeholder {
					margin-left: 12rpx;
					color: #9CA3AF;
					font-size: 26rpx;
				}
			}

			.message-icon {
				font-size: 32rpx;
				cursor: pointer;
			}
		}

		// 内容容器
		&>*:not(.search-bar) {
			padding-top: 120rpx;
			// 增加底部内边距避免被tabBar遮挡，特别是在安卓设备上
			padding-bottom: 200rpx;
		}

		// 轮播图样式
		.banner-wrapper {
			padding-top: 120rpx !important;
			padding-bottom: 20rpx !important;

			.swiper {
				height: 320rpx;
				width: 100%;

				.banner-image {
					width: 100%;
					height: 100%;
					border-radius: 24rpx;
					margin: 0 30rpx;
				}
			}
		}

		// 功能入口样式
		.function-section {
			display: flex;
			justify-content: space-around;
			padding: 40rpx 0;
			background-color: #ffffff;
			margin-bottom: 20rpx;

			.function-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.function-icon {
					width: 96rpx;
					height: 96rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 20rpx;
					margin-bottom: 16rpx;
				}

				.icon-text {
					font-size: 44rpx;
				}

				.function-name {
					font-size: 24rpx;
					color: #1F2937;
				}
			}
		}

		// 通用区块样式
		.section {
			background-color: #ffffff;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.section-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;

				.section-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #1F2937;
				}

				.section-more {
					font-size: 26rpx;
					color: #9CA3AF;
				}
			}
		}

		// 活动列表样式
		.activity-list {
			.activity-item {
				margin-bottom: 24rpx;
				border-radius: 16rpx;
				overflow: hidden;
				background-color: #f9fafb;

				.activity-image {
					width: 100%;
					height: 240rpx;
				}

				.activity-info {
					padding: 20rpx;

					.activity-title {
						font-size: 28rpx;
						font-weight: 500;
						color: #1F2937;
						margin-bottom: 12rpx;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}

					.activity-meta {
						display: flex;
						justify-content: space-between;
						margin-bottom: 12rpx;

						.activity-time,
						.activity-location {
							font-size: 24rpx;
							color: #6B7280;
						}
					}

					.activity-status {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.activity-price {
							font-size: 32rpx;
							font-weight: bold;
							color: #EF4444;
						}

						.activity-people {
							font-size: 24rpx;
							color: #9CA3AF;
						}
					}
				}
			}
		}

		// 搭子列表样式
		.partner-list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.partner-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 22%;

				.partner-avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					margin-bottom: 12rpx;
					border: 2rpx solid #e5e7eb;
				}

				.partner-name {
					font-size: 26rpx;
					color: #1F2937;
					margin-bottom: 6rpx;
				}

				.partner-interest {
					font-size: 20rpx;
					color: #9CA3AF;
					text-align: center;
				}
			}
		}

		// 兴趣列表样式
		.interest-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.interest-item {
				width: 48%;
				margin-bottom: 20rpx;
				border-radius: 16rpx;
				overflow: hidden;
				background-color: #f9fafb;

				.interest-image {
					width: 100%;
					height: 160rpx;
				}

				.interest-name {
					display: block;
					font-size: 26rpx;
					font-weight: 500;
					color: #1F2937;
					padding: 16rpx 16rpx 8rpx;
				}

				.interest-count {
					display: block;
					font-size: 22rpx;
					color: #9CA3AF;
					padding: 0 16rpx 16rpx;
				}
			}
		}

		// 响应式适配
		@media screen and (max-width: 320px) {
			.banner-wrapper {
				.swiper {
					height: 280rpx;
				}
			}

			.function-section {
				.function-item {
					.function-icon {
						width: 88rpx;
						height: 88rpx;
					}
				}
			}
		}
	}
</style>